import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image, Input } from '@tarojs/components'
import { sendCoupon, sendCouponDetails } from '@/api/coupon'
import { staticUrl } from '@/utils'
import './index.scss'

interface State {
  value: string | undefined
  couponState: number
  getDone: boolean
}

export default class Index extends Component<{}> {
  $instance = getCurrentInstance();

  constructor (props) {
    super(props)
    this.state = {
      value: '',
      couponState: 0,
      getDone: false
    }
  }
  state: State
  UNSAFE_componentWillMount() { }
  componentDidMount() {
    const { id } = this.$instance.router.params
    sendCouponDetails({
      id
    }).then(res => {
      const data = res.data.data
      this.setState({
        couponState: data.status
      })
    })
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  changeValue(e) {
    const { value } = e.detail
    this.setState({
      value
    })
    return value
  }

  getCoupon() {
    const { value } = this.state
    const { id } = this.$instance.router.params
    if (!value) {
      Taro.showToast({
        icon: 'none',
        title: '手机号不能为空',
        duration: 2000
      })
      return
    }
    if (!/\d{11}/gi.test(value)) {
      Taro.showToast({
        icon: 'none',
        title: '检查手机号是否正确！',
        duration: 2000
      })
      return
    }
    sendCoupon({
      id,
      mobile: value
    }).then(res => {
      console.log(res)
      const data = res.data
      if (!data.success) {
        Taro.showToast({
          icon: 'none',
          title: data.data.message,
          duration: 2000
        });
        return
      }
      // const data = res.data.data
      this.setState({
        couponState: 3,
        getDone: true
      }, () => {
        Taro.showToast({
          title: '发送成功',
          duration: 2000
        })
      })
    }).catch(err => {
      console.log('err', err)
      let error = err.data
      if (!error.success) {
        Taro.showToast({
          icon: 'none',
          title: error.data.message,
          duration: 2000
        });
      }

    })
  }

  render() {
    const { value, couponState, getDone } = this.state
    const { name } = this.$instance.router.params
    return (
      <View className='coupon-share'>
        <Image
          src={staticUrl('/img/coupon/coupon-bg.jpg')}
          className='bgpic'
        ></Image>
        <View className='coupon-info'>
          <View className='coupon-info-wrap'>
            {couponState !== 3 && (
              <View className='get-coupon'>
                <View className='tips'> Hi，送你一张</View>
                <View className='name'>{name}</View>
                <View className='import-text'>
                  <Input
                    maxLength={11}
                    className='input'
                    value={value}
                    onInput={(e) => this.changeValue(e)}
                    placeholder='请输入手机号领取'
                  ></Input>
                </View>
                <View className='tips2'>记得领取后到店使用哦</View>
                <View className='btn' onClick={() => this.getCoupon()}>
                  领取卡券
                </View>
              </View>
            )}
            {getDone && couponState === 3 && (
              <View className='get-coupon-done'>
                <View className='hd-title'>
                  <View className='ic'></View>
                  <View className='title'>
                    <View className='strong'>领取成功</View>
                    <View className='span'>记得到店使用哦！</View>
                  </View>
                </View>
                <View className='ft-msg'>
                  用手机号码{value}登录集群车宝 即可查看领取的卡券
                </View>
              </View>
            )}
            {!getDone && couponState === 3 && (
              <View className='get-coupon-done'>
                <View className='hd-title'>
                  <View className='title'>
                    <View className='strong'>{name}</View>
                  </View>
                </View>
                <View className='ft-msg'>
                  您来晚啦，优惠券已被领取了
                </View>
              </View>
            )}
          </View>
        </View>
      </View>
    );
  }
}
